<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style media="screen">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:800px;
            height:600px;
            position: relative;
            margin: 100px auto;
            background:#000000;
            border:2px solid red;
            overflow: hidden;
        }
        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    function FireWork(){
        this.box = document.querySelector('#box')
        this.bindEvent();
        this.autoboom()
    }
    FireWork.prototype.bindEvent = function(){
        var self = this;
        self.box.onclick = function(eve){
            var e = eve || window.event;
            var firework = self.createFirework();
            firework.style.left = eve.offsetX + 'px';
            $(firework).animate({
                top:eve.offsetY
            },800,function(){
                firework.remove();
                self.boom(eve.offsetX,eve.offsetY);
            })
        }
    }
    FireWork.prototype.createFirework = function(){
        var div = document.createElement(div);
        div.style.backgroundColor = '#' + Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0');
        div.className = 'ball';
        this.box.appendChild(div);
        return div
    }
    FireWork.prototype.boom = function(x,y){
        var deg = 0;
        var r = 100;
        for(var i=0;i<20;i++){
            var fire = this.createFirework()
            fire.style.left = x + 'px';
            fire.style.top = y + 'px';
            deg += 18;
            var target_x = Math.round(Math.cos(Math.PI / 180 * deg) * r);
            var target_y = Math.round(Math.sin(Math.PI / 180 * deg) * r);

            $(fire).animate({
                left:target_x + x,
                top:target_y + y
            },function(){
                this.remove();
            })
        }

    }
    FireWork.prototype.autoboom = function(){
        var self = this;
        setInterval(function(){
            self.box.onclick({
                offsetX : Math.round(Math.random() * self.box.offsetWidth) + 100,
                offsetY : Math.round(Math.random() * self.box.offsetHeight) + 100
            })
        },500)
    }
    var fw = new FireWork()
</script>
</html>